//
//  SwiftUIView_LazyVGrid.swift
//  SwiftUIPractice
//
//  Created by 天快要黑了 (external - Project) on 2024/9/9.
//

import SwiftUI

struct SwiftUIView_LazyVGrid: View {
    
    var body: some View {
        
        
        
//        let columns: [GridItem] = [
//            GridItem(.fixed(50), spacing: nil, alignment: nil), //表示宽度是 50
//            GridItem(.fixed(50), spacing: nil, alignment: nil),
//            GridItem(.fixed(100), spacing: nil, alignment: nil), //这一列的宽度是 100
//            GridItem(.fixed(75), spacing: nil, alignment: nil),
//            GridItem(.fixed(50), spacing: nil, alignment: nil),
//        ]
//        //对于一个 VG 网格, 纵向的网格来说, 里面的参数 columns: 是一个数组, 数组里的元素个数, 代表有多少列,
//        //然后是 里面包含的这个元素的数量, 元素的数量, 会被 columns 依次平均分配, 里面包含的数量, 就是 所有格子的总数.
//        //也就是说, 一个控制行数, 一个控制总个数, 然后均分.
//        LazyVGrid(columns: columns) {
//            ForEach(0..<50) { index in
//                Rectangle().frame(height: 50) //格子的高度是 50
//            }
//        }
        
        
        
//        //第二个示例
//        let columns: [GridItem] = [
//            // 这里的 flexible 我们没有传 最大值 和 最小值 这两个参数, 目的就是让它 "灵活"
//            //在默认状态下, 这个东西的宽度就会直接充满屏幕
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//
//            //在有两个的情况下, 这个两列,均分屏幕宽度
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//            
//            //添加多少列就会均分多少列的屏幕宽度
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//        ]
//        
//        LazyVGrid(columns: columns) {
//            ForEach(0..<40) { index in
//                Rectangle().frame(height: 50) //格子的高度是 50
//            }
//        }

        
        
        
//        //第 3 个示例
//        let columns: [GridItem] = [
//            //在这种自适应的情况下, 在明明只有 1 列的情况下, 仍然被分成了很多列, 然后按照宽度是50来进行分配, 依次填充下去
//            //也就是说, 这个一列, 宽度最小是50 , 最大是 300, 它按照300去计算了宽度? 好像不对
//            GridItem(.adaptive(minimum: 50, maximum: 300), spacing: nil, alignment: nil),
//
//            GridItem(.adaptive(minimum: 150, maximum: 300), spacing: nil, alignment: nil),
//        ]
//        
//        LazyVGrid(columns: columns) {
//            ForEach(0..<40) { index in
//                Rectangle().frame(height: 50) //格子的高度是 50
//            }
//        }

        
        
        
//        //第 4 个示例
//        let columns: [GridItem] = [
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//        ]
//        
//        ScrollView(.vertical) {
//            
//            Rectangle().fill(.yellow).frame(height: 300)
//            
//            LazyVGrid(columns: columns) {
//                ForEach(0..<50) { index in
//                    Rectangle().frame(height: 150)
//                }
//            }
//        }
        
       
        
//        //第 5 个示例
//        let columns: [GridItem] = [
//            // spacing: 这里的 spacing 控制的是 相邻行之间的间距, 这里就是第一行和第二行之间 相隔25的距离
//            GridItem(.flexible(), spacing: 25, alignment: nil),
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//            GridItem(.flexible(), spacing: nil, alignment: nil),
//        ]
//        ScrollView(.vertical) {
//            // spacing: 13 目前这个网格是,3行, 在每一行的上下之间, 间距是12
//            LazyVGrid(columns: columns, alignment: .center, spacing: 13, pinnedViews: [], content: {
//                ForEach(0..<50) { index in
//                    Rectangle().frame(height: 150)
//                }
//            })
//        }
        

    
        
        
        //第 6 个示例
        let columns: [GridItem] = [
            GridItem(.flexible(), spacing: 6, alignment: nil),
            GridItem(.flexible(), spacing: 6, alignment: nil),
            GridItem(.flexible(), spacing: 6, alignment: nil),
        ]
        ScrollView(.vertical) {

            Rectangle().fill(Color.orange).frame(height: 150)
            
            // pinnedViews: [.sectionHeaders]  这个东西实际上就是, 表头悬浮
            LazyVGrid(columns: columns, alignment: .center, spacing: 6, pinnedViews: [.sectionHeaders], content: {
                
                // 在这里添加 一个 组
                Section {
                    ForEach(0..<9) { index in
                        Rectangle().frame(height: 150)
                    }
                } header: {
                    Text("这是我的标题 A").font(.largeTitle).foregroundStyle(.red).background(Color.yellow).frame(maxWidth: .infinity)
                }

                //我们开始复制粘贴这些组
                Section {
                    ForEach(0..<9) { index in
                        Rectangle().frame(height: 150)
                    }
                } header: {
                    Text("这是我的标题 B").font(.largeTitle).foregroundStyle(.red).background(Color.yellow).frame(maxWidth: .infinity)
                }

                
                //我们开始复制粘贴这些组
                Section {
                    ForEach(0..<9) { index in
                        Rectangle().frame(height: 150)
                    }
                } header: {
                    Text("头 什么东西").font(.largeTitle).foregroundStyle(.blue).background(Color.green).frame(maxWidth: .infinity)
                } footer: {
                    Text("尾 还带了脚标?").font(.largeTitle).foregroundStyle(.purple).background(Color.green).frame(maxWidth: .infinity)
                }
            })
        }
        
    }
}

#Preview {
    SwiftUIView_LazyVGrid()
}
